<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高度塌陷</title>
    <!--
       在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当为子元素设置了浮动后，子元素会完全脱离文档流，此时
       将会导致子元素撑起父元素的高度，导致父元素的高度塌陷。

       由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。

       所以在开发中我们一定以避免出现高度塌陷的问题，我们可以将父元素的高度写死，以避免高度塌陷的问题出现，但是一旦高度写死，父元素的高度将不能自动
       适应子元素的高度，而且如果子元素内容过多还会导致内容溢出的问题，所以这种方案是不推荐使用的。
   -->

    <style type="text/css">

        /*
            .box1 和 .box2 和 .box3 演示高度塌陷的问题
        */
        .box1 {
              border: red solid 10px;
          }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: greenyellow;
            float: left;
        }

        .box3 {
            height: 100px;
            background-color: rebeccapurple;
        }
    </style>

</head>
<body>
   <div class="box1">
       <div class="box2"></div>
   </div>
    <div class="box3"></div>
</body>
</html>